<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>图书管理</span>
      <el-button size="mini" type="primary" class="el-icon-plus" @click="addListBtnFn" style="float: right">
        添加
      </el-button>
    </div>
    <!-- 表格 -->
    <div class="table_list">
      <el-table :data="tableData" style="width: 100%" :max-height="$store.state.tableHeight">
        <el-table-column type="index" label="序号" width="100"></el-table-column>
        <el-table-column prop="bookid" label="编号" width="150"></el-table-column>
        <el-table-column prop="bookname" label="名称" width="150"></el-table-column>
        <el-table-column prop="classify" label="分类" width="100"></el-table-column>
        <el-table-column prop="author" label="作者" width="150"></el-table-column>
        <el-table-column prop="press" label="出版社" width="180"></el-table-column>
        <el-table-column prop="bookshelf" label="书架" width="100"></el-table-column>
        <el-table-column prop="booknum" label="库存" width="100">
          <template v-slot="scope">
            <el-tag type="success">{{ scope.row.booknum }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="" width="">
          <template v-slot="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="updateListBtnFn(scope.row)">编辑</el-button>
            <el-popconfirm confirm-button-text="好的" cancel-button-text="不用了" icon="el-icon-info" icon-color="red"
              title="这是一段内容确定删除吗？" @confirm="delListBtnFn(scope.row.id)">
              <el-button type="danger" slot="reference" icon="el-icon-delete" size="mini">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 弹出层 对话框 -->
    <el-dialog :title="isEdit ? '更新图书信息' : '添加图书'" :visible.sync="dialogVisible" width="30%" top="10vh"
      :before-close="handleClose" @closed="onCloseFn">
      <el-form ref="listFormRef" :model="listForm" label-width="80px" :rules="rules">
        <el-form-item label="编号" prop="bookid">
          <el-input v-model="listForm.bookid"></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="bookname">
          <el-input v-model="listForm.bookname"></el-input>
        </el-form-item>
        <el-form-item label="分类" prop="classify">
          <el-select v-model="listForm.classify" placeholder="请选择图书分类">
            <el-option v-for="(item, index) of classifyList" :label="item.name" :value="item.name"
              :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="作者" prop="author">
          <el-input v-model="listForm.author"></el-input>
        </el-form-item>
        <el-form-item label="出版社" prop="press">
          <el-input v-model="listForm.press"></el-input>
        </el-form-item>
        <el-form-item label="书架" prop="bookshelf">
          <el-select v-model="listForm.bookshelf" placeholder="请选择书架">
            <el-option v-for="(item, index) of shelfList" :label="item.bookshelf" :value="item.bookshelf"
              :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="库存" prop="booknum">
          <el-input-number v-model="listForm.booknum" :min="0" :max="9999"></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onsubmit">确 定</el-button>
      </span>
    </el-dialog>
    <Pagination :total="total" @pagination="handlePageChange" />
  </el-card>
</template>

<script>
import Pagination from "@/components/Pagination.vue";
import {
  addBookAPI,
  delBookAPI,
  getBookListAPI,
  getClassifyListAPI,
  getShelfListAPI,
  uptBookAPI,
} from "@/api";
export default {
  components: {
    Pagination,
  },
  data() {
    return {
      // 图书分类
      classifyList: [],
      // 图书书架
      shelfList: [],
      // 分页
      total: 0,
      pagenum: 1,
      pagesize: 9,
      dialogVisible: false,
      isEdit: false, //ture 编辑 false 新增
      editId: "", //编辑id
      tableData: [],
      listForm: {
        bookid: '',
        bookname: "",
        classify: "",
        author: "",
        press: "",
        bookshelf: "",
        booknum: "",
      },
      rules: {
        bookname: [
          { required: true, message: "请输入图书名称", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        classify: [
          { required: true, message: "请选择图书分类", trigger: "change" },
        ],
        author: [
          { required: true, message: "请输入图书作者", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        press: [
          { required: true, message: "请输入图书出版社", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        bookshelf: [
          { required: true, message: "请选择图书分类", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    // 获取分类
    async getClassifyList() {
      const res = await getClassifyListAPI();
      this.classifyList = res.data.data;
    },
    // 获取书架
    async getShelfList() {
      const res = await getShelfListAPI();
      this.shelfList = res.data.data;
    },
    // 分页
    handlePageChange(obj) {
      this.pagenum = obj.pagenum;
      this.pagesize = obj.pagesize;
      this.getList();
    },
    // 获取图书列表
    async getList() {
      const res = await getBookListAPI(this.pagenum, this.pagesize);
      this.tableData = res.data.data;
      this.total = res.data.total;
      console.log(this.tableData);

      // this.$axios({
      //   methods: "GET",
      //   url: "http://localhost:3000/list",
      // }).then((res) => {
      //   console.log(res);
      //   if (res.status == 200) {
      //     this.tableData = res.data;
      //   }
      // });
    },
    // 添加 图书框
    addListBtnFn() {
      this.isEdit = false;
      this.dialogVisible = true;
    },
    // 更新 图书框
    updateListBtnFn(obj) {
      console.log(obj);
      this.editId = obj.id;
      this.isEdit = true;
      this.dialogVisible = true;
      this.$nextTick(() => {
        // this.listForm = obj;
        this.listForm.bookid = obj.bookid;
        this.listForm.bookname = obj.bookname;
        this.listForm.classify = obj.classify;
        this.listForm.author = obj.author;
        this.listForm.press = obj.press;
        this.listForm.bookshelf = obj.bookshelf;
        this.listForm.booknum = obj.booknum;
      });
    },
    // 提交 修改 添加
    onsubmit() {
      this.$refs.listFormRef.validate(async (valid) => {
        if (valid) {
          if (this.isEdit) {
            const res = await uptBookAPI({ ...this.listForm, id: this.editId });
            if (res.data.status === 0) {
              this.$message.success("更新图书成功！");
            } else {
              this.$message.error("更新图书失败！");
            }
          } else {
            const res = await addBookAPI(this.listForm);
            if (res.data.status === 0) {
              this.$message.success("添加图书成功！");
            } else {
              this.$message.error("添加图书失败！");
            }
          }
        } else {
          console.log("error submit!!");
          return false;
        }
        this.dialogVisible = false;
        this.getList();
      });
    },
    // 删除图书
    async delListBtnFn(id) {
      console.log(id);
      const res = await delBookAPI(id);
      if (res.data.status === 0) {
        this.$message.success("删除图书成功！");
      } else {
        this.$message.error("删除图书失败！");
      }
      this.getList();
    },
    // 对话框关闭
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => { });
    },
    onCloseFn() {
      this.$refs.listFormRef.resetFields();
    },
  },
  mounted() {
    this.getList();
    this.getClassifyList();
    this.getShelfList();
  },
};
</script>

<style scoped></style>
